<template>
  <div id="detail">
    <div class="content-box">
      <div class="item"
           :style="{width:item.width}"
           v-for="(item,i) in columns"
           :key="i">
        <span v-if="item.name==='extra'">
          <span class="item"
                style="width:100%"
                v-for="(obj,i) in description.extra"
                :key="obj.id">
            <div class="item-label">{{obj.key}}：</div>
            <pre class="item-value">{{obj.value}}</pre>
          </span>
        </span>

        <span v-else-if="item.name==='imgsBill'"
              style="display: flex;align-items: center;">
          <div class="item-label">节目单：</div>
          <div class="item-value">
            <div class="item-text"
                 v-for="(d,i) in description.imgsBill"
                 :key="i"
                 @click="hanldeClick(i)"
                 style="top:-3px">
              附件{{i+1}}
            </div>
          </div>
        </span>

        <span v-else>
          <div class="item-label">{{item.label}}</div>
          <el-link class="item-value"
                   v-if="item.name.includes('Url')"
                   style="top:-3px"
                   target="在线播放"
                   :href="description[item.name]">{{description[item.name]}}</el-link>
          <div v-else
               class="item-value">{{description[item.name]}}</div>
        </span>
      </div>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%"
             :src="dialogImageUrl"
             alt="">
      </el-dialog>
    </div>
  </div>
</template>

<script>
const obj = {
  number: '1.1',
  name: '茶话会',
  type: '节目',
  address: '江苏南京大剧院',
  time: '2019/12/13 17:30',
  des: '2019年一年一度的茶话会2019年一年一度的茶话会2019年一年一度的茶话会',
  idea: '年度总结大会',
  director: '冯小刚',
  brain: '张艺谋',
  long: '3个小时',
  extra: '暗杀搜哇按键搜集Asia瑟吉欧哇按实际按实际'
}
export default {
  name: 'DetialInfo',
  props: {
    description: {
      type: Object,
      default: () => (obj)
    },
    columns: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: ''
    }
  },
  methods: {
    hanldeClick(i) {
      this.dialogVisible = true
      this.dialogImageUrl = this.description.urlList[i]
    }
  }
}
</script>

<style lang="scss" scss>
// *::after {
//   content: "";
//   display: block;
//   clear: both;
//   height: 0;
// }
#detail {
  width: 100%;
  // height: 100%;
  // border: 1px solid #ccc;
  // border-radius: 4px;
  @import "./scss/common.scss";
  .head {
    width: 100%;
    height: 40px;
    position: relative;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    .head-button {
      position: absolute;
      right: 10px;
      top: 0px;
    }
  }
  .content-box {
    width: 100%;
    // height: 260px;
    padding: 10px 30px;
    overflow: auto;

    .item {
      line-height: 40px;
      float: left;
      color: #333;
      .item-label {
        font-weight: 600;
        // font-size: 15px;
        display: inline-block;
      }
      .item-value {
        font-weight: 400;
        font-size: 14px;
        display: inline-block;
        line-height: 20px;
      }
      pre {
        width: 100%;
        white-space: pre-line;
        word-wrap: break-word;
        margin: 0;
      }
      .item-text {
        // width: 275px;
        float: left;
        margin-right: 10px;
        color: #409eff;
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }
}
</style>
